---
import type { PhotoData } from '~/types'
import { cn } from '~/lib/utils'
import PolaroidStack from './PolaroidStack'
import TimelineIcon from './TimelineIcon.astro'

interface Props {
  photoData: PhotoData[]
  class?: string
}

const { photoData, class: className } = Astro.props
---

<div class={cn(className)}>
  {
    photoData.map((timeline, index) => (
      <div class="timeline-item relative group/item opacity-0 animate-slide-down" style={`animation-delay: ${index * 0.1}s`}>
        <div class="flex gap-x-3">
          <div class="relative last:after:hidden after:absolute after:top-7 after:bottom-0 after:start-3.5 after:w-px after:-translate-x-[0.5px] after:bg-zinc-200/50 dark:after:bg-zinc-700/50">
            <div class="relative z-10 size-7 flex justify-center items-center">
              <TimelineIcon icon={timeline.icon} index={index} />
            </div>
          </div>
          <div class="grow pt-0.5 pb-8 relative">
            <p class="text-xs block mt-1 sm:absolute sm:mt-0 sm:top-1.5 right-0 text-muted-foreground">{timeline.date}</p>
            <h2 class="mt-0.5 sm:mt-0 font-sans text-md font-normal!">
              <span class="font-semibold">{timeline.title}</span>
            </h2>
            <p class="mt-0.5 sm:mt-1 text-sm text-muted-foreground">
              {timeline.description && (
                <span>
                  {timeline.description}
                  <br />
                </span>
              )}
            </p>
            <div class="mt-4 py-2 sm:py-4">
              <PolaroidStack photos={timeline.photos} title={timeline.title} description={timeline.description} client:load />
            </div>
          </div>
        </div>
      </div>
    ))
  }
</div>
